<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      body {
          width: 100px;
      }
      .radio-group {
          display: flex;
          flex-direction: column;
          max-width: 300px;
      }
      .radio-option {
          position: relative;
          padding-left: 35px;
          margin-bottom: 12px;
          cursor: pointer;
          font-size: 16px;
      }
      .radio-option input {
          position: absolute;
          opacity: 0;
          cursor: pointer;
      }
      .checkmark {
          position: absolute;
          top: 0;
          left: 0;
          height: 25px;
          width: 25px;
          background-color: #eee;
          border-radius: 50%;
      }
      .radio-option:hover input ~ .checkmark {
          background-color: #ccc;
      }
      .radio-option input:checked ~ .checkmark {
          background-color: #2196F3;
      }
      .checkmark:after {
          content: "";
          position: absolute;
          display: none;
      }
      .radio-option input:checked ~ .checkmark:after {
          display: block;
      }
      .radio-option .checkmark:after {
          top: 9px;
          left: 9px;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: white;
      }
  </style>
  </head>
<body>
  <h2>保存类型：</h2>
  <div class="radio-group">
      <label class="radio-option">图片
          <input type="radio" name="options" value="IMAGE" checked>
          <span class="checkmark"></span>
      </label>
      <label class="radio-option">PDF
          <input type="radio" name="options" value="PDF">
          <span class="checkmark"></span>
      </label>
  </div>
  <script src="popup.js"></script>

</body>
</html>